<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script src="js/jquery.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="head/cropper.min.css" rel="stylesheet">
<link href="head/sitelogo.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>-->
<script src="js/layer/layer.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="head/cropper.js"></script>
<script src="head/sitelogo.js"></script>
<style>
    #biaodan {
        margin: 0 auto;
        width: 500px;
        margin-top: 50px;
    }
</style>

<body>
<ol class="breadcrumb">
    <li>
        <a href="index.html">主页</a>
    </li>
    <li>
        <a href="#">个人中心</a>
    </li>
    <li >
    	 <a href="jobSeekerUpdate.html">修改个人信息</a>
    	
    </li>
    <li>
        <a href="jobSeekerRsumeAdd.html">修改个人简历</a>
    </li>
    <li class="active">
       修改密码
    </li>
</ol>
<div class="container-fluid">
    <div id="biaodan" class="form-horizontal">
        <!--显示头像-->
        <div class="user_pic" style="margin: 10px;">
            <img id="jobSeekerHeadImage">
        </div>
        <!--添加修改头像按钮-->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#avatar-modal" style="margin: 10px;">修改头像</button>

        <!--裁剪图片弹出层-->
        <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <!--<form class="avatar-form" action="upload-logo.php" enctype="multipart/form-data" method="post">-->
                    <form class="avatar-form">
                        <div class="modal-header">
                            <button class="close" data-dismiss="modal" type="button">&times;</button>
                            <h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
                        </div>
                        <div class="modal-body">
                            <div class="avatar-body">
                                <div class="avatar-upload">
                                    <input class="avatar-src" name="avatar_src" type="hidden">
                                    <input class="avatar-data" name="avatar_data" type="hidden">
                                    <label for="avatarInput" style="line-height: 35px;">图片上传</label>
                                    <button class="btn btn-danger"  type="button" style="height: 35px;" onClick="$('input[id=avatarInput]').click();">请选择图片</button>
                                    <span id="avatar-name"></span>
                                    <input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file"></div>
                                <div class="row">
                                    <div class="col-md-9">
                                        <div class="avatar-wrapper"></div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="avatar-preview preview-lg" id="imageHead"></div>
                                        <!--<div class="avatar-preview preview-md"></div>
                                <div class="avatar-preview preview-sm"></div>-->
                                    </div>
                                </div>
                                <div class="row avatar-btns">
                                    <div class="col-md-4">
                                        <div class="btn-group">
                                            <button class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"> 向左旋转</button>
                                        </div>
                                        <div class="btn-group">
                                            <button class="btn  btn-danger fa fa-repeat" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"> 向右旋转</button>
                                        </div>
                                    </div>
                                    <div class="col-md-5" style="text-align: right;">
                                        <button class="btn btn-danger fa fa-arrows" data-method="setDragMode" data-option="move" type="button" title="移动">
								<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
								</span>
                                        </button>
                                        <button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom" data-option="0.1" title="放大图片">
								<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, 0.1)">
								  <!--<span class="fa fa-search-plus"></span>-->
								</span>
                                        </button>
                                        <button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom" data-option="-0.1" title="缩小图片">
								<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, -0.1)">
								  <!--<span class="fa fa-search-minus"></span>-->
								</span>
                                        </button>
                                        <button type="button" class="btn btn-danger fa fa-refresh" data-method="reset" title="重置图片">
									<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;reset&quot;)" aria-describedby="tooltip866214">
									</span>
                                        </button>
                                    </div>
                                    <div class="col-md-3">
                                        <button class="btn btn-danger btn-block avatar-save fa fa-save" type="button" data-dismiss="modal"> 保存修改</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>

        <div class="form-group">
            <label for="jsname" class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="jsname" placeholder="请输入姓名">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">性别</label>
            <label class="radio-inline">
                <input type="radio" name="sex" id="sex" value="男" checked="checked">男
            </label>
            <label class="radio-inline">
                <input type="radio" name="sex" id="sex" value="女"> 女
            </label>
        </div>

        <div class="form-group">
            <label for="jsemail" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="jsemail" placeholder="请输入电子邮箱">
            </div>
        </div>
        <div class="form-group">
            <label for="jstel" class="col-sm-2 control-label">请输入电话</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="jstel" placeholder="请输入电话">
            </div>
        </div>
        <div class="form-group">
            <label for="jsdate" class="col-sm-2 control-label"></label>
            <div class="col-sm-10">
                <input type="date" class="form-control" id="jsdate">
            </div>
        </div>
        <div class="form-group">
            <label for="jslivecity" class="col-sm-2 control-label">请输入现住城市</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="jslivecity" placeholder="请输入现住城市">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button id="submit" class="btn btn-success">修改个人信息</button>
            </div>
        </div>
    </div>

</div>
</body>
<!--获得图片base64格式-->
<script src="head/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    //做个下简易的验证  大小 格式
    $('#avatarInput').on('change', function(e) {
        var filemaxsize = 1024 * 5;//5M
        var target = $(e.target);
        var Size = target[0].files[0].size / 1024;
        if(Size > filemaxsize) {
            alert('图片过大，请重新选择!');
            $(".avatar-wrapper").childre().remove;
            return false;
        }
        if(!this.files[0].type.match(/image.*/)) {
            alert('请选择正确的图片!')
        } else {
            var filename = document.querySelector("#avatar-name");
            var texts = document.querySelector("#avatarInput").value;
            var teststr = texts; //你这里的路径写错了
            testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
            filename.innerHTML = testend;
        }

    });
    var dataUrl;
    $(".avatar-save").on("click", function() {
        var img_lg = document.getElementById('imageHead');
        // 截图小的显示框内的内容
        html2canvas(img_lg, {
            allowTaint: true,
            taintTest: false,
            onrendered: function(canvas) {
                canvas.id = "mycanvas";
                //生成base64图片数据
                dataUrl = canvas.toDataURL("image/jpeg");
                $("#jobSeekerHeadImage").attr("src",dataUrl)

            }
        });
    })

    var jobData = sessionStorage.getItem("jobSeeker_name");
    var obj1=JSON.parse(jobData);
    $("#jobSeekerHeadImage").attr("src",obj1.headImage)
    //提交数据
    $('#submit').click(function() {
        var jobSeeker_name = sessionStorage.getItem("jobSeeker_name");
        var obj = JSON.parse(jobSeeker_name);
        $.post('jobSeekerUpdate.do', {
            jsid: obj.jsid,
            jsname: $('#jsname').val(),
            sex: $('#sex').val(),
            jsemail: $('#jsemail').val(),
            jstel: $('#jstel').val(),
            jsdate: $('#jsdate').val(),
            jslivecity: $('#jslivecity').val(),
            jsheadImage:dataUrl

        }, function(data) {
            if(data.code == 200) {
                var obj1=JSON.stringify(data.jobSeeker)
                sessionStorage.setItem('jobSeeker_name',obj1);
                layer.msg(data.msg, {
                    icon: 1,
                    time: 2000
                }, function() {
                    location.href = "index.html";
                })
            } else {
                layer.msg(data.msg);
            }
        }, "JSON");
    })
</script>
</html>